<template>
	<view class="box">
		<view class="box2">
			<view>
				<u-icon style="float: right;margin-top: 17px;"  name="gift-fill"></u-icon>
				<u-icon style="float: right;margin-top: 17px;" @click="search()" name="search"></u-icon>
			</view>

			<view class="box1">
				<swiper autoplay style="margin-bottom:30px;">
					<swiper-item>
						<image src="../img/1.png" style="width:100%; height:120px;"></image>
					</swiper-item>
					<swiper-item>
						<image src="../img/2.png" style="width:100%; height:120px;"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="kongbai"></view>
		<view class="xianshi">
			<view class="">
				<span style="float: left;margin-left: 20px;">限时兑换 </span>
				<span style="float: right;margin-right: 20px;">更多</span><br>
				<view class="">
					<image src="../img/2.png" style="width:50px; height:50px;"></image>
				</view>
			</view>
		</view>
		<view class="remen">
			<view class="">
				<span style="float: left;margin-left: 20px;">近期热门 </span>
				<span style="float: right;margin-right: 20px;">更多</span><br>
				<view class="">
					<image src="../img/2.png" style="width:50px; height:50px;"></image>
				</view>
			</view>
		</view>
		<view class="xihuan">
			<view class="">
				<span style="float: left;margin-left: 20px;">猜你喜欢 </span>
				<span style="float: right;margin-right: 20px;">更多</span><br>
				<view>
					<image class="imgxhleft" src="../img/2.png" style=""></image>
				</view>

			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				]
			}
		},
		methods: {
			search() {
				uni.redirectTo({
				    url: './SearchDetail',
				    success: function(res) {
				        console.log(res)                
				    }
				})
			}
		}
	}
</script>

<style>
	.box {
		background-color: #ECFDFA;
		height: 840px;
	}

	.box1 {
		width: 80%;
		height: 100px;
		margin: 0 auto;
		position: relative;
		top: 40px;
	}

	.box2 {
		width: 100%;
		height: 180px;
		background: #2BCDDD;
		margin-top: 10px;
	}

	.kongbai {
		width: 100%;
		height: 40px;
	}

	.xianshi {
		width: 100%;
		height: 100px;
		background-color: #FFFFFF;
	}

	.remen {
		margin-top: 10px;
		width: 100%;
		height: 100px;
		background-color: #FFFFFF;
	}

	.xihuan {
		margin-top: 10px;
		width: 100%;
		height: 300px;
		background-color: #FFFFFF;
	}

	.imgxhleft {
		width: 40%;
		height: 140px;
		float: left;
		margin-left: 30px;
		margin-top: 20px;
	}

	.search {
		position: relative;
		top: 10px;
	}
</style>
